import Layouts from '@/src/components/Layouts'
import React ,{useEffect, useState}from 'react'
import { Card,Table,Switch,Button, message  } from "antd"
import GroupSearch from '@/src/components/GroupSearch'
import Paginations from '@/src/components/Pagination'
import http from '@/src/utils/https'
const Group = () => {


   //分页
   let [page, setPage] = useState(1);
   let [pagesize, SetpageSize] = useState(10);
   let [total, SetTotal] = useState(100);
    
   const handelpage = (page: number, pagesize: number) => {
     // console.log(page, pagesize, "page")
     setPage(page)
     SetpageSize(pagesize)
   }
   const handelsize = (page: number, pagesize: number) => {
     // console.log(page, pagesize, "size")
     setPage(page)
     SetpageSize(pagesize)
   }

   //页面初始数据
   let [groupList,setGroupList] = useState([] as any);
   //页面渲染数据
   let [groupLists,setGroupLists] = useState([] as any);
   //定义一个节流
   let [timer,settimer] = useState(false)
   //请求数据函数
   const getgrouplist =(obj={}) =>{
    //判断有无同样的请求
    if(timer){
      return 
    }
    // 执行请求
    http.get("/group",{params:obj}).then(res=>{
      if(res.data.code==200){
        setGroupList(res.data.data)
        SetTotal(res.data.data.length)
      }

      // 请求结束重新赋值
      settimer(false)
    })
    //执行函数时设一个状态标识
      settimer(true)
   }


   //初始化请求数据
   useEffect(()=>{
      if(groupList<=0){
        getgrouplist();
      }
   },[])
   //处理页面渲染数据
   useEffect(()=>{
    if(groupList.length<=0) return 
    let newList = groupList.slice((page-1)*pagesize,page*pagesize).map((item:any)=>{
        item.key = item.id
        return item
    })
    setGroupLists(newList)
   },[groupList,page,pagesize])
   //开关 点击设置状态
   const onChange = async (checked: boolean,item:any) => {
    let obj = '1';
    if(!checked){
      obj = '0'
    }
    let res = await http.post("/set/group",{status:obj,id:item.key})
      if(res.data.code==200){
          getgrouplist();
      }
  };
    //搜索
    const handelsearch = (val:any) =>{
      let  obj = {};
      if(val.username != '' ){
        obj = {name:val.username}
      }
      if(val.status){
        obj = {...obj,status:val.status}
      }
      getgrouplist(obj)
    }
  //删除
  const handeldel = async (id:any)=>{
      console.log(id,"id")
      let res = await http.delete("/del/group",{params:{id}})
      if(res.data.code == 200){
        message.success("删除成功")
        getgrouplist()
      }
  }
   //表格
  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
      width:70
    },
    {
      title: '图片',
      dataIndex: 'url',
      key: 'url',
      width:90,
      render:(_:any,item:any)=>{
          return <>
            <img src={item.url} style={{width:'50px',height:"50px"}} alt="" />
          </>
      }
    },
    {
      title: '楼盘名称',
      dataIndex: 'name',
      key: 'name',
      width:90
    },
    {
      title: '楼盘地址',
      dataIndex: 'address',
      key: 'address',
      width:120
    },
    {
      title: '发起人',
      dataIndex: 'users',
      key: 'users',
      width:90
    },
    {
      title: '发起时间',
      dataIndex: 'times',
      key: 'times',
      width:90
    },
    {
      title: '团购状态',
      dataIndex: 'status',
      key: 'status',
      width:90,
      render:(_:any,item:any)=>{
          return<>
            {
             item.status=='1'?
               <span style={{color:"cadetblue"}}>已开启</span>
              :<span style={{color:"orange"}}>已关闭</span>
            }
          </>
      }
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width:90,
      render:(_:any,item:any)=>{
          return <>
            <Switch checked={item.status=='1'} onChange={(e)=>onChange(e,item)} />
          </>
      }
    },
    {
      title: '操作',
      dataIndex: 'edit',
      key: 'edit',
      width:90,
      render:(_:any,item:any)=>{
          return <>
            <Button type="link" 
              onClick={()=>handeldel(item.id)}
            >删除</Button>
          </>
      }
    },
  ];
  
   
  return (
    <Layouts>
      <Card style={{ width: "100%"  }} bordered={false}>
        <h2 >团购管理</h2>
      </Card>
      <Card style={{ width: "100%"  }} bordered={false} title="搜索">
          <GroupSearch handelsearch={handelsearch}></GroupSearch>
      </Card>
      <Card style={{ width: "100%"  }} bordered={false}>
          {/* 内容 */}
          {
            groupList.length>0 && 
            <Table  scroll={{ y: 540 }} style={{ height: 540 ,marginBottom:"10px"}}  dataSource={groupLists} columns={columns} pagination={false} />
          }
      </Card>
      <Card  bordered={false} style={{ width: '100%', position: "sticky", left: "0", bottom: "0", zIndex: "9",minWidth:"800px",borderTop:"1px solid #ccc"}}>
      <Paginations total={total} page={page} pagesize={pagesize} onpage={handelpage} onsize={handelsize}></Paginations>
      </Card>
    </Layouts>
  )
}

export default Group